<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数字分组表格生成器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }
        body {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 0 1rem;
            background-color: #f5f7fa;
        }
        .container {
            background: white;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 2rem;
        }
        .input-group {
            display: flex;
            gap: 1rem;
            margin-bottom: 2rem;
            flex-wrap: wrap;
        }
        .form-item {
            flex: 1;
            min-width: 200px;
        }
        label {
            display: block;
            margin-bottom: 0.5rem;
            color: #34495e;
            font-weight: 500;
        }
        input {
            width: 100%;
            padding: 0.8rem;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
        }
        input:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 0 3px rgba(52,152,219,0.1);
        }
        button {
            padding: 0.8rem 2rem;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 1rem;
            cursor: pointer;
            transition: background-color 0.3s;
            margin-top: 1.75rem;
        }
        button:hover {
            background-color: #2980b9;
        }
        .error {
            color: #e74c3c;
            margin-bottom: 1rem;
            text-align: center;
            font-weight: 500;
        }
        .table-container {
            overflow-x: auto;
            margin-top: 1.5rem;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 1rem;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 0.8rem;
            text-align: center;
        }
        th {
            background-color: #3498db;
            color: white;
            font-weight: 500;
        }
        tr:nth-child(even) {
            background-color: #f8f9fa;
        }
        .group-info {
            color: #7f8c8d;
            text-align: center;
            margin-bottom: 1rem;
            font-style: italic;
        }
        @media (max-width: 768px) {
            .input-group {
                flex-direction: column;
            }
            button {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>数字分组表格生成器</h1>
        
        <div class="input-group">
            <div class="form-item">
                <label for="totalNum">输入数字（30-100）</label>
                <input type="number" id="totalNum" min="30" max="100" placeholder="例如：57">
            </div>
            <div class="form-item">
                <label for="columnNum">分组列数（默认5列）</label>
                <input type="number" id="columnNum" min="1" max="100" value="5" placeholder="例如：5">
            </div>
            <button id="generateBtn">生成表格</button>
        </div>
        
        <div class="error" id="errorMsg"></div>
        <div class="group-info" id="groupInfo"></div>
        
        <div class="table-container" id="tableContainer"></div>
    </div>

    <script>
        // 获取DOM元素
        const totalNumInput = document.getElementById('totalNum');
        const columnNumInput = document.getElementById('columnNum');
        const generateBtn = document.getElementById('generateBtn');
        const errorMsg = document.getElementById('errorMsg');
        const groupInfo = document.getElementById('groupInfo');
        const tableContainer = document.getElementById('tableContainer');

        // 生成表格按钮点击事件
        generateBtn.addEventListener('click', generateTable);

        // 输入框回车触发生成
        totalNumInput.addEventListener('keypress', (e) => e.key === 'Enter' && generateTable());
        columnNumInput.addEventListener('keypress', (e) => e.key === 'Enter' && generateTable());

        function generateTable() {
            // 重置状态
            errorMsg.textContent = '';
            groupInfo.textContent = '';
            tableContainer.innerHTML = '';

            // 获取输入值并转换为整数
            const totalNum = parseInt(totalNumInput.value.trim());
            const columnNum = parseInt(columnNumInput.value.trim());

            // 输入验证
            if (isNaN(totalNum) || totalNum < 30 || totalNum > 100) {
                errorMsg.textContent = '请输入30-100之间的有效数字！';
                return;
            }

            if (isNaN(columnNum) || columnNum < 1 || columnNum > totalNum) {
                errorMsg.textContent = `列数必须是1-${totalNum}之间的有效数字！`;
                return;
            }

            // 计算分组规则
            const baseCount = Math.floor(totalNum / columnNum); // 每组基础数量
            const remainder = totalNum % columnNum; // 余数
            const groups = []; // 存储每组的起止数字
            let currentNum = 1;

            // 生成每组的起止范围和数字
            for (let i = 0; i < columnNum; i++) {
                const groupSize = i < remainder ? baseCount + 1 : baseCount; // 前remainder组多1个
                const endNum = currentNum + groupSize - 1;
                // 生成组内数字（正序）
                let numbers = Array.from({ length: groupSize }, (_, idx) => currentNum + idx);
                
                // 关键优化：当列数为5时，第二组（索引1）和第四组（索引3）倒序，形成S型
                if (columnNum === 5 && (i === 1 || i === 3)) {
                    numbers = numbers.reverse();
                }
                
                groups.push({
                    start: currentNum,
                    end: endNum,
                    numbers: numbers
                });
                currentNum = endNum + 1;
            }

            // 显示分组信息（增加S型说明）
            let infoText = `共${totalNum}个数字，分为${columnNum}组 | 基础每组${baseCount}个数字，前${remainder}组各多1个数字`;
            if (columnNum === 5) {
                infoText += ' | 第二组、第四组倒序排列（S型）';
            }
            groupInfo.textContent = infoText;

            // 生成表格
            const table = document.createElement('table');
            
            // 创建表头
            const thead = document.createElement('thead');
            const headerRow = document.createElement('tr');
            groups.forEach((group, idx) => {
                const th = document.createElement('th');
                th.textContent = `第${idx + 1}组（${group.start}-${group.end}）`;
                headerRow.appendChild(th);
            });
            thead.appendChild(headerRow);
            table.appendChild(thead);

            // 创建表格内容（按行排列，每行显示各组对应位置的数字）
            const tbody = document.createElement('tbody');
            const maxRowCount = Math.max(...groups.map(group => group.numbers.length)); // 最大行数（最长组的长度）

            for (let row = 0; row < maxRowCount; row++) {
                const tr = document.createElement('tr');
                groups.forEach(group => {
                    const td = document.createElement('td');
                    td.textContent = group.numbers[row] || ''; // 没有数字则显示空
                    tr.appendChild(td);
                });
                tbody.appendChild(tr);
            }

            table.appendChild(tbody);
            tableContainer.appendChild(table);
        }
    </script>
</body>
</html>
